@background: #2c3643;
@base-color: #ccc;

html, body, #app {
  width: 100%;
  height: 100%;
}

.taie-layout-container{
  height: 100%;
  width: 100%;
  min-width: 900px;
  background-size: cover;
  overflow: hidden;
  position: relative;
  background: @background;

  .taie-layout-aside {
    overflow: hidden;
    background: @background;
    transition: all .5s;

    .taie-layout-logo {
      position: relative;
      height: 60px;
      padding-left: 24px;
      overflow: hidden;
      line-height: 55px;
      background: @background;

      h1 {
        color: #fff;
        font-size: 20px;
        margin: 0 0 0 12px;
        font-weight: 600;
        vertical-align: middle;
        display: inline-block;
        line-height: 55px;
      }
      img {
        height: 30px;
        vertical-align: middle;
      }
    }

    .te-layout-aside-menu {
      display: inline-block;
      text-align: left;
      background: @background;

      &:not(.el-menu--collapse) {
        width: 240px;
        min-height: 400px;
      }

      .el-menu {
        background: transparent;
        border: none;
      }

      .el-menu-item, .el-submenu__title, .el-submenu__title i {
        color: @base-color;

        &.is-active, &:hover, &:focus {
          background: #222a34;
          color: #fff;
        }
      }
    }
  }

  .taie-layout-right-container {
    padding-right: 15px;

    .taie-layout-header {
      padding-left: 0;
      background: @background;

      .taie-layout-header-top {
        display: flex;
        background: transparent;

        .taie-layout-header-top-collapse, .taie-layout-header-top-btn {
          width: 60px;
          line-height: 58px;
          text-align: center;
          cursor: pointer;
          color: @base-color;

          i {
            font-size: 20px;
            line-height: 58px;
          }

          &:hover {
            background: #222a34;
            color: #fff;
          }
        }

        .taie-layout-header-top-menu {
          flex: 1;

          .el-menu {
            background: transparent;

            .el-menu-item {
              color: @base-color;

              &.is-active, &:hover, &:focus {
                background: #222a34;
                color: #fff;
              }
            }
          }

          .el-menu--horizontal {
            .el-menu-item, .el-menu-item.is-active, .el-menu-item.is-active:focus, & {
              border-bottom: 0;
            }
          }
        }

        .user-info-text {
          width: 120px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
        }
      }

      .taie-layout-header-tabs {
        .taie-layout-header-tabs-tab {
          float: left;

          .el-tabs__nav {
            background: #242d38;
            border-color: #2a2d2e;
            border: none;
            overflow: auto;

            .el-tabs__item {
              background: transparent;
              color: #cccccc;
              border: none;

              &.is-active {
                background: #fff;
                color: #242d38;
              }
            }
          }
        }
        .taie-layout-header-tabs-btn {
          float: right;

          .el-button {
            border-radius: 4px 4px 0 0;

            &:first-child {
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
            }
            &:last-child {
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;
            }
          }
        }
      }
    }

    .taie-layout-main {
      background: #ffffff;
    }

    .taie-layout-footer {
      background: #ffffff;
    }

    .el-header, .el-main {
      padding: 0;
    }
  }

  .taie-layout-footer {
    padding: 10px 16px;
    text-align: center;

    .taie-layout-footer-links {
      margin-bottom: 8px;
    }

    .taie-layout-footer-copyright {
      color: @base-color;
      font-size: 14px;
    }
  }
}

.el-menu--popup .el-menu-item, .el-menu--popup .el-submenu__title {
  height: 36px;
  line-height: 36px;
}

.user-btn {
  width: 100px;
}
